import * as _ from "lodash"
import * as React from "react"
import Carousel from "../components/carousel"

import classes from "./product-images.module.scss"

interface ProductImageProps {
  src: string
}

function ProductImage(props: ProductImageProps) {
  const { src } = props
  return <img className={classes.productImage} src={src} alt={src}/>
}

interface ProductImagesProps {
  imageUrls: string[]
}

export default function ProductImages(props: ProductImagesProps) {
  const { imageUrls } = props
  return (<Carousel>
    {_.map(imageUrls, url => <ProductImage key={url} src={url}/>)}
  </Carousel>)
}
